import { Table, Tag } from 'antd';
import React, { useContext } from 'react'
import classnames from 'classnames';

import { amountColumn, percentColumn } from '@/pages/SalaryManage/utils/TableUtil';
import { TaxAmtDescription } from '@/pages/SalaryManage/components/TaxAmtDescription';
import { connect } from 'dva'
import EmptyPlaceHolder from '@/pages/SalaryManage/components/EmptyPlaceHolder'
import BaseSettingContext from './BaseSettingContext';
import style from './index.less';

const MODIFY_STATUS = {
    // 正常
    0: {
        tag: null,
        rowTheme: null
    },
    // 新增
    1: {
        tag: {
            text: '新增',
            color: 'cyan'
        },
        rowTheme: 'add'
    },
    // 删除
    2: {
        tag: {
            text: '删除',
            color: 'red'
        },
        rowTheme: 'delete'
    },
    // 编辑
    3: {
        tag: {
            text: '编辑',
            color: 'blue'
        },
        rowTheme: null
    }
};

const getGroupKey = item => item?.taxRateDetailId;
const getRowKey = () => 'taxRateDetailId';
const onFieldCell = field => record =>
    (record?.[field] === 1 ? { 'data-cell-theme': 'modified' } : { 'data-cell-theme': '' });

/**
 * 表格列定义
 * @returns []
 */
const tableColumn = decimalPlaces => [
    {
        title: '级数',
        dataIndex: 'taxLevel',
        width: 100,
        align: 'left',
        render(text, record) {
            const statusMapperInfo = MODIFY_STATUS[record.status] ?? MODIFY_STATUS[0];
            const tagInfo = statusMapperInfo.tag;

            return (
                <div>
                    <span className={style.mr8}><EmptyPlaceHolder value={text} /></span>
                    {tagInfo ? <Tag color={tagInfo.color}>{tagInfo.text}</Tag> : null}
                </div>
            );
        }
    },
    {
        title: '累计预扣预缴应纳税所得额',
        dataIndex: 'ljsde',
        align: 'left',
        render: (text, record) => <TaxAmtDescription record={record} decimalPlaces={decimalPlaces} />,
        onCell: onFieldCell('isTaxAmt')
    },
    percentColumn({
        title: '预扣率(%)',
        dataIndex: 'taxRate',
        onCell: onFieldCell('isTaxRate')
    }, { decimalPlaces }),
    amountColumn({
        title: '速算扣除数',
        dataIndex: 'quickDeductAmt',
        onCell: onFieldCell('isQuickDeductAmt')
    }, { decimalPlaces })
];

const TableWrapper = ({
    columns,
    dataSource,
    showCompareEffect,
    comparePosition,
    hoverRow,
    selectedRow,
    setCurrentHoverRow,
    setCurrentSelectedRow
}) => {
    const tableProps = {
        onRow: record => ({
            className: classnames({
                'row-hover': hoverRow && getGroupKey(hoverRow.row) === getGroupKey(record),
                'row-cell-hover': hoverRow && hoverRow.row[getRowKey()] === record[getRowKey()],
                'row-selected': selectedRow && selectedRow.row[getRowKey()] === record[getRowKey()]
            }),
            onClick: () => {
                setCurrentSelectedRow({ position: comparePosition, row: record });
            },
            onMouseEnter: () => {
                setCurrentHoverRow({ position: comparePosition, row: record });
            },
            onMouseLeave: () => {
                setCurrentHoverRow(null);
            },
            'data-row-theme': showCompareEffect
                ? (MODIFY_STATUS[record?.status] || MODIFY_STATUS['0'])?.rowTheme || ''
                : ''
        })
    };

    return (
        <div>
            <Table
                tableLayout="fixed"
                columns={columns}
                rowKey={getRowKey()}
                dataSource={dataSource}
                pagination={false}
                scroll={{ x: 'max-content' }}
                bordered={false}
                {...tableProps}
            />
        </div>
    );
};

const CompareItem = ({
    dataSource,
    showCompareEffect = false,
    comparePosition,
    hoverRow,
    selectedRow,
    setCurrentHoverRow,
    setCurrentSelectedRow
}) => {
    const { contextState: { scale = 2 } } = useContext(BaseSettingContext);

    return (
        <div className="compare-item">
            <TableWrapper
                columns={tableColumn(scale)}
                dataSource={dataSource}
                showCompareEffect={showCompareEffect}
                pagination={false}
                comparePosition={comparePosition}
                hoverRow={hoverRow}
                selectedRow={selectedRow}
                setCurrentHoverRow={setCurrentHoverRow}
                setCurrentSelectedRow={setCurrentSelectedRow}
            />
        </div>
    );
}


export default connect()(CompareItem);
